<template>
  <div class="app-container">
    <el-form ref="refForm" :inline="true" :model="filters" class="demo-form-inline filter-container">
      <el-form-item label="域名类型:" prop="type">
        <el-select v-model="filters.type">
          <el-option v-for="item in deviceTypeList"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户端类型:" prop="type">
        <el-select v-model="filters.clientType">
          <el-option v-for="item in clientTypeList"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column label="创建时间" align="center" width="160px">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="域名类型" align="center" prop="type">
        <template slot-scope="{row}">
          {{row.type===0?'PC':'手机'}}
        </template>
      </el-table-column>
      <el-table-column label="用户端类型" align="center" prop="type">
        <template slot-scope="{row}">
          {{row.clientType===0?'会员':'代理'}}
        </template>
      </el-table-column>
      <el-table-column label="域名地址" align="center" prop="domain">
      </el-table-column>
      <el-table-column label="添加人" align="center" prop="creator"  width="100px">
      </el-table-column>
      <el-table-column label="操作" align="center"  width="100px">
        <template slot-scope="{row}">
          <el-button v-if="roleCheck('del')"  type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--<div class="pagination-container">-->
      <!--<el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"-->
                     <!--:current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"-->
                     <!--:layout="gridLayout" :total="tableData.total">-->
      <!--</el-pagination>-->
    <!--</div>-->
  </div>
</template>

<script>
  import {form, grid, dialog} from '@/build';

  import {
    sysDomainDeleteApi as deleteApi,
    sysDomainListApi as listApi,
  } from '@/services/api/marketing';


  export default {
    name: 'offer-list',

    mixins: [form, grid, dialog],

    components: {
    },

    data() {
      return {
        tableData: [],
        deviceTypeList:[
          {
            value: -1,
            title: '全部'
          },
          {
            value: 0,
            title: 'PC'
          },
          {
            value: 1,
            title: '手机'
          }
        ],
        clientTypeList:[

          {
            value: 0,
            title: '会员'
          },
          {
            value: 2,
            title: '代理'
          }
        ],
        filters: {
          type: -1,
          clientType: 0,
        },
        filterDateType: false,
      }
    },
    watch:{
      'filters.type':{
        handler(next) {
          this.getAll();
        },
        immediate: true
      },
      'filters.clientType':{
        handler(next) {
          this.getAll();
        },
        immediate: true
      }
    },

    methods: {
      handleDelete({id}) {
        this.$confirm(`确定要删除此域名吗？`, '删除域名', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteApi({
            id,
          }).then(([result, data]) => {
            if (result) {
              this.doGet({action: 'getGrid'});
              this.$message({
                type: 'success',
                message: `删除成功!`
              });
            } else {
              this.$message({
                type: 'error',
                message: `删除失败!${data.message}`
              });
            }
          });
        })
          .catch(() => {
          })
      },

      resetFilter(){
        this.resetForm('refForm')
        this.gridSearch();
      }
    },

    mounted() {
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });

      this.getAll();
    }
  }
</script>
